<template>
  <div class="container">
    <div class="box" v-for="(item, index) in cards" :key="index">
      <span></span>
      <div class="content" @click="doIt(index)">
        <h2>{{ item.title }}</h2>
      </div>
    </div>
  </div>
  <div id="text" style="font-size: 16px; display: flex; justify-content: center; user-select: none;">
    <TextHover text="Virtual!   Illusion!   Nothingness!" />
  </div>
  <!-- 卡片区域 -->
  <el-dialog v-model="userban" title="封禁用户" :show-close="false" width="500" body-class="userban" draggable>
    <div class="user-select-container">
      <el-select v-model="selectedUserId" placeholder="输入用户账号" filterable remote :remote-method="fetchUsers"
        @change="handleUserChange" class="custom-select" :label="selectedNickname">
        <el-option v-for="user in filteredUsers" :key="user.id" :label="user.nickname" :value="user.id">
          <div class="user-option">
            <el-avatar :src="user.avatar || 'https://via.placeholder.com/150'" size="medium"
              class="user-avatar"></el-avatar>
            <span class="user-nickname">{{ user.nickname }}</span>
            <span class="user-account">{{ user.account }}</span>
          </div>
        </el-option>
      </el-select>
      <el-input v-model="banreason" style="width: 100%" :rows="6" type="textarea" placeholder="封禁具体原因" />
      <button id="ban" @click="onBan">提交</button>
    </div>
  </el-dialog>
  <el-dialog v-model="userx" title="查询用户" width="500" draggable>
    <div class="user-select-container">
      <el-select v-model="selectedUserId" placeholder="输入用户账号" filterable remote :remote-method="fetchUsers"
        @change="handleUserChange" class="custom-select" :label="selectedNickname">
        <el-option v-for="user in filteredUsers" :key="user.id" :label="user.nickname" :value="user.id">
          <div class="user-option">
            <el-avatar :src="user.avatar || 'https://via.placeholder.com/150'" size="medium"
              class="user-avatar"></el-avatar>
            <span class="user-nickname">{{ user.nickname }}</span>
            <span class="user-account">{{ user.account }}</span>
          </div>
        </el-option>
      </el-select>

      <!-- 添加展示用户信息的DOM结构 -->
      <div v-if="selectedUser" class="user-info">
        <el-avatar :src="selectedUser.avatar || 'https://via.placeholder.com/150'" size="large"
          class="info-avatar"></el-avatar>
        <div class="info-details">
          <p><strong>ID:</strong> {{ selectedUser.id }}</p>
          <p><strong>昵称:</strong> {{ selectedUser.nickname }}</p>
          <p><strong>账号:</strong> {{ selectedUser.account }}</p>
          <p><strong>头像:</strong> <a :href="selectedUser.avatar" target="_blank">查看头像</a></p>
          <p><strong>密码:</strong> {{ selectedUser.password }}</p>
          <p><strong>状态:</strong> {{ selectedUser.state }}</p>
          <p><strong>封禁原因:</strong> {{ selectedUser.banreason || "无" }}</p>
          <p><strong>余额:</strong> {{ selectedUser.money }}</p>
          <p><strong>创建时间:</strong> {{ selectedUser.createdAt }}</p>
          <p><strong>更新时间:</strong> {{ selectedUser.updatedAt }}</p>
        </div>
      </div>

      <button id="find" @click="onFind">提交</button>
    </div>
  </el-dialog>
  <el-dialog v-model="userfind" title="解封用户" width="500" draggable>
    <div class="user-select-container">
      <el-select v-model="selectedUserId" placeholder="输入用户账号" filterable remote :remote-method="fetchUsers"
        @change="handleUserChange" class="custom-select" :label="selectedNickname">
        <el-option v-for="user in filteredUsers" :key="user.id" :label="user.nickname" :value="user.id">
          <div class="user-option">
            <el-avatar :src="user.avatar || 'https://via.placeholder.com/150'" size="medium"
              class="user-avatar"></el-avatar>
            <span class="user-nickname">{{ user.nickname }}</span>
            <span class="user-account">{{ user.account }}</span>
          </div>
        </el-option>
      </el-select>
      <button id="release" @click="onRelease">提交</button>
    </div>
  </el-dialog>
</template>

<script>
import { showMsg } from '@/utils/showMsg'
import TextHover from '@/views/common/TextHover.vue'
import axios from 'axios'

export default {
  name: 'GlassCard',
  components: {
    TextHover
  },
  data()
  {
    return {
      cards: [
        { title: '封禁用户' },
        { title: '查询用户' },
        { title: '解封用户' }
      ],
      userban: false,
      userx: false,
      userfind: false,
      selectedUserId: null,
      selectedNickname: '', // 用于显示的 nickname
      filteredUsers: [], // 用于存储模糊查询的结果
      banedUserId: -1,
      banreason: '',
      selectedUser: null
    }
  },
  methods: {
    doIt(index)
    {
      if (index === 0)
        this.userban = true
      else if (index === 1)
        this.userx = true
      else
        this.userfind = true
    },
    fetchUsers(query)
    {
      if (!query)
      {
        this.filteredUsers = [] // 清空列表
        return
      }
      // 调用后端接口进行模糊查询
      axios.get(`/node/users/mh/${query}`)
        .then(response =>
        {
          this.filteredUsers = response.data.data || []
        })
        .catch(error =>
        {
          showMsg('查询用户失败:', error, 'error')
          this.filteredUsers = [] // 查询失败时清空列表
        })
    },
    handleUserChange(userId)
    {
      const selectedUser = this.filteredUsers.find(user => user.id === userId)
      if (selectedUser)
        this.selectedNickname = selectedUser.nickname // 更新 nickname
      this.banedUserId = selectedUser.id //填充目标用户 ID
    },
    onBan()
    {
      axios.post('/node/users/ban', {
        id: this.banedUserId,
        banreason: this.banreason
      })
        .then(res =>
        {
          showMsg('操作成功', res.data.data, 'success')
        })
        .catch(e =>
        {
          showMsg('操作失败', e, 'error')
        })
    },
    onRelease()
    {
      axios.post(`/node/users/release/${this.banedUserId}`)
        .then(res =>
        {
          showMsg('操作成功', res.data.data, 'success')
        })
        .catch(e =>
        {
          showMsg('操作失败', e, 'error')
        })
    },
    onFind()
    {
      axios.get(`/node/users/idPlus/${this.banedUserId}`)
        .then(res =>
        {
          this.selectedUser = res.data.data
          showMsg('操作成功', res.data.data.nickname, 'success')
        })
        .catch(e =>
        {
          showMsg('操作失败', e, 'error')
        })
    }
  }
}
</script>

<style scoped>
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1d061a;
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  width: 100%;
  margin-top: 10vh;
  user-select: none;
  -webkit-user-drag: none;
}

.container .box {
  position: relative;
  width: 320px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: .5s;
}

.container .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: .5s;
}

.container .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: .5s;
  transition: .5s;
  filter: blur(30px);
}

.container .box:hover::before,
.container .box:hover::after {
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
}

.container .box:nth-child(1)::before,
.container .box:nth-child(1)::after {
  background: linear-gradient(315deg, #ffbc00, #ff0058);
}

.container .box:nth-child(2)::before,
.container .box:nth-child(2)::after {
  background: linear-gradient(315deg, #03a9f4, #ff0058);
}

.container .box:nth-child(3)::before,
.container .box:nth-child(3)::after {
  background: linear-gradient(315deg, #4dff03, #00d0ff);
}

.container .box span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.container .box span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: .5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}

.container .box:hover span::before {
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.container .box span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: .5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
  animation-delay: -1s;
}

.container .box:hover span::after {
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

@keyframes animate {

  0%,
  100% {
    transform: translateY(10px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.container .box .content {
  position: relative;
  z-index: 1;
  padding: 20px 40px;
  left: 0;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transform: .5s;
  color: #fff;
}

.container .box:hover .content {
  left: -25px;
  padding: 60px 40px;
}

.container .box .content h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.container .box .content p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 10px;
}

.container .box .content a {
  font-size: .8em;
  display: inline-block;
  background: #fff;
  color: #111;
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

.user-select-container {
  padding: 20px;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.el-select-dropdown__item {
  height: auto !important;
  padding: 5px 10px !important;
}

.user-option {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
}

.user-avatar {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.user-nickname {
  font-weight: bold;
  margin-right: 10px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-account {
  color: #888;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#ban {
  background: linear-gradient(315deg, #ffbc00, #ff0058);
  padding: 10px 20px;
  color: white;
  text-align: center;
  text-decoration: none;
  transform: skew(-20deg);
  transition: transform 0.3s ease;
  border: 0;
  border-radius: 12px;
}
#ban:hover {
  transform: skew(-20deg) scale(1.05);
}
#release {
  background: linear-gradient(315deg, #4dff03, #00d0ff);
  padding: 10px 20px;
  color: white;
  text-align: center;
  text-decoration: none;
  transform: skew(-20deg);
  transition: transform 0.3s ease;
  border: 0;
  border-radius: 12px;
}

#release:hover {
  transform: skew(-20deg) scale(1.05);
}
#find {
  background: linear-gradient(315deg, #03a9f4, #ff0058);
  padding: 10px 20px;
  color: white;
  text-align: center;
  text-decoration: none;
  transform: skew(-20deg);
  transition: transform 0.3s ease;
  border: 0;
  border-radius: 12px;
}

#find:hover {
  transform: skew(-20deg) scale(1.05);
}
</style>
